<template>
  <div class="about_us">
    <!-- 导航 -->
    <div class="sub_nav">
      <div class="img">
        <el-image
          style="height:100%;width:inherit"
          :src="about_us_banner_image"
          fit="cover"
        ></el-image>
        <div class="front_title">
          <p>加盟</p>
          <p>
            三两胶东酱香包秉承胶东在地风味，为烟台人民提供了便利、干净、美味的健康好食
          </p>
        </div>
      </div>

      <div class="sub_title">
        <div>
          <span @click="to_sec('#anchor01')">加盟优势</span>
          <span @click="to_sec('#anchor02')">加盟条件</span>
          <span @click="to_sec('#anchor03')">加盟政策</span>
          <span @click="to_sec('#anchor04')">投资收益</span>
          <span @click="to_sec('b')">联系我们</span>
        </div>
      </div>
      <transition name="ceiling_transition">
        <div v-show="sub_title_show" class="sub_title sub_title_show">
          <div>
            <span @click="to_sec('#anchor01')">加盟优势</span>
            <span @click="to_sec('#anchor02')">加盟条件</span>
            <span @click="to_sec('#anchor03')">加盟政策</span>
            <span @click="to_sec('#anchor04')">投资收益</span>
            <span @click="to_sec('b')">联系我们</span>
          </div>
        </div>
      </transition>
    </div>

    <!-- 加盟优势 -->
    <div id="anchor01" class="join_advantage">
      <div class="image">
        <el-image
          style="height:100%;width:inherit"
          :src="join_advantage_image"
          fit="cover"
        ></el-image>
      </div>
      <div class="join_introduction">
        <div class="join_introduction_image">
          <el-image
            style="height:100%;width:inherit"
            :src="join_introduction_image"
            fit="cover"
          ></el-image>
        </div>
        <div class="join_introduction_content">
          <p>时尚的品牌形象</p>
          <p>
            赋予传统包子一个时尚的形象：热气腾腾，活力四射。简单不凡最能撩拨人心，传统有趣彰显品牌实力。
          </p>
          <p>高效的自有物流配送体系</p>
          <p>
            自建物流公司，精准物流线路规划，订单迅速响应，保证食材高效直达。
          </p>
        </div>
      </div>
      <div class="advantage_detail">
        <div
          v-for="(item, index) in advantage_detail"
          :key="index"
          class="advantage_detail_item"
        >
          <div class="title">{{ item.title }}</div>
          <p v-html="item.content" class="content"></p>
        </div>
      </div>
    </div>

    <!-- 加盟条件 -->
    <div id="anchor02" class="join_condition">
      <div class="image">
        <el-image
          style="height:100%;width:inherit"
          :src="join_condition_image"
          fit="cover"
        ></el-image>
      </div>
      <div class="join_introduction">
        <div class="join_introduction_content">
          <p>投资商条件</p>
          <p>
            认同公司经营理念，遵守公司各项管理规定;<br />
            遵守国家相关法律法规，守法经营，具备良好的职业道德;<br />
            渴望成功，有较强的品牌意识和长远的发展眼光;<br />
            有10万元以上的投资创业实力，对投资收益和风险有正确的认知;<br />
            了解特许经营的相关知识，愿意加盟门店三年以上，与品牌共同提升。<br />
          </p>
          <div class="tips">
            <span>渴望成功</span>
            <span>流动资金</span>
            <span>管理能力</span>
          </div>
        </div>
        <div class="join_introduction_image">
          <el-image
            style="height:100%;width:inherit"
            :src="investment_condition_image"
            fit="cover"
          ></el-image>
        </div>
      </div>
      <div class="store">
        <div class="store_stall">
          <p>档口快捷店</p>
          <div
            v-for="(item, index) in store_stall"
            :key="index"
            class="store_stall_item"
          >
            <div class="store_stall_item_image">
              <img :src="item.url" alt="" class="img" />
            </div>
            <span>{{ item.title }}</span>
            <span>{{ item.content }}</span>
          </div>
        </div>
        <div class="store_dining">
          <p>堂食快捷店</p>
          <div
            v-for="(item, index) in store_dining"
            :key="index"
            class="store_dining_item"
          >
            <div class="store_dining_item_image">
              <img :src="item.url" alt="" class="img" />
            </div>
            <span>{{ item.title }}</span>
            <span>{{ item.content }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 加盟流程 -->
    <div id="anchor03" class="join_process">
      <div class="image">
        <el-image
          style="height:100%;width:inherit"
          :src="join_process_image"
          fit="cover"
        ></el-image>
      </div>

      <div class="process_image">
        <div class="process_image_item">
          <el-image
            style="height:100%;width:inherit"
            :src="join_process01_image"
            fit="cover"
          ></el-image>
          <span>公司工厂标准化生产</span>
        </div>
        <div class="process_image_item">
          <el-image
            style="height:100%;width:inherit"
            :src="join_process02_image"
            fit="cover"
          ></el-image>
          <span>统一配送馅料到各门店</span>
        </div>
        <div class="process_image_item">
          <el-image
            style="height:100%;width:inherit"
            :src="join_process03_image"
            fit="cover"
          ></el-image>
          <span>由门店现制面皮成型</span>
        </div>
        <div class="process_image_item">
          <el-image
            style="height:100%;width:inherit"
            :src="join_process04_image"
            fit="cover"
          ></el-image>
          <span>蒸制后出售</span>
        </div>
      </div>

      <div class="process_content">
        <div
          v-for="(item, index) in process_content"
          :key="index"
          class="process_content_item"
        >
          <div class="icon">
            <img :src="item.url" alt="" />
          </div>
          <p>{{ item.title }}</p>
          <p v-html="item.content"></p>
        </div>
      </div>
    </div>

    <!-- 投资收益 -->
    <div id="anchor04" class="income_investment">
      <div class="image">
        <el-image
          style="height:100%;width:inherit"
          :src="income_investment_image"
          fit="cover"
        ></el-image>
      </div>
      <div class="investment_analysis">
        <p>单店投资分析</p>
        <div class="table">
          <div
            v-for="(item, index) in analysis_table_options"
            :key="index"
            class="line01"
          >
            <div
              v-for="(data, indexs) in item"
              :key="indexs"
              class="line01_item"
            >
              {{ data }}
            </div>
          </div>
        </div>
      </div>
      <div class="investment_profit">
        <p>投资利润分析</p>
        <div class="table">
          <div
            v-for="(item, index) in profit_table_options"
            :key="index"
            class="line01"
          >
            <div
              v-for="(data, indexs) in item"
              :key="indexs"
              :class="[
                'line01_item',
                index === 2 && indexs === '1' ? 'special_item' : '',
                index === 5 && indexs === '1' ? 'special_item' : ''
              ]"
            >
              {{ data }}
              <br />
              <span v-if="index === 2 && indexs === '1'"
                >（按42%毛利率计算）</span
              >
              <span v-if="index === 5 && indexs === '1'">（水，电，煤）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "join",
  data() {
    return {
      sub_title_show: false,
      baozi: [],
      other: [],
      baozi_display_array: [],
      other_display_array: [],
      advantage_detail: [
        {
          title: "选址支持",
          content: "专业选址指导、店铺评估，<br>现场协助考察"
        },
        {
          title: "设计支持",
          content: "统一品牌形象设计<br> 营销物料统一设计派发"
        },
        {
          title: "培训支持",
          content: "技术培训、操作培训、经营培训<br>等项目支持持续更新"
        },
        {
          title: "供应链支持",
          content: "自有供应链生产厂商、物流公司，<br>下单直达，快捷方便"
        },
        {
          title: "产品支持",
          content: "新品持续研发，老品口味更新<br>根据本地口味调整配方"
        },
        {
          title: "督导支持",
          content: "不定期上门指导<br>现场辅导解决经营问题"
        },
        { title: "营销支持", content: "持续品牌推广<br>门店活动方案布署" },
        {
          title: "区域保护支持",
          content: "控制当地加盟商数量<br>确保各店客源稳定"
        }
      ],
      store_stall: [
        {
          url: require("../assets/join/icon/w/area.png"),
          title: "店铺面积",
          content: "16平以上，20平以上最佳"
        },
        {
          url: require("../assets/join/icon/w/door.png"),
          title: "店铺门幅",
          content: "2.5米以上"
        },
        {
          url: require("../assets/join/icon/w/height.png"),
          title: "店铺高度",
          content: "2.6米以上"
        },
        {
          url: require("../assets/join/icon/w/electric.png"),
          title: "电",
          content: "220V"
        },
        {
          url: require("../assets/join/icon/w/water.png"),
          title: "水",
          content: "上、下水"
        },
        {
          url: require("../assets/join/icon/w/prove.png"),
          title: "房产证",
          content: "需要房产证，便于办理执照"
        },
        {
          url: require("../assets/join/icon/w/date.png"),
          title: "签订期限",
          content: "至少两年一签，最好4年一签，可转让"
        },
        {
          url: require("../assets/join/icon/w/require.png"),
          title: "特别要求",
          content: "房东允许从事餐饮类"
        }
      ],
      store_dining: [
        {
          url: require("../assets/join/icon/b/area.png"),
          title: "店铺面积",
          content: "16平以上，20平以上最佳"
        },
        {
          url: require("../assets/join/icon/b/door.png"),
          title: "店铺门幅",
          content: "2.5米以上"
        },
        {
          url: require("../assets/join/icon/b/height.png"),
          title: "店铺高度",
          content: "2.6米以上"
        },
        {
          url: require("../assets/join/icon/b/electric.png"),
          title: "电",
          content: "220V"
        },
        {
          url: require("../assets/join/icon/b/water.png"),
          title: "水",
          content: "上、下水"
        },
        {
          url: require("../assets/join/icon/b/prove.png"),
          title: "房产证",
          content: "需要房产证，便于办理执照"
        },
        {
          url: require("../assets/join/icon/b/date.png"),
          title: "签订期限",
          content: "至少两年一签，最好4年一签，可转让"
        },
        {
          url: require("../assets/join/icon/b/require.png"),
          title: "特别要求",
          content: "房东允许从事餐饮类"
        }
      ],
      process_content: [
        {
          url: require("../assets/join/image/聊天.jpg"),
          title: "加盟咨询",
          content: "向总部了解相关合作事项，<br>索取相关资料"
        },
        {
          url: require("../assets/join/image/调研.jpg"),
          title: "考核签约",
          content: "总部考察参观，签订<br>意向合同"
        },
        {
          url: require("../assets/join/image/申请.jpg"),
          title: "选址评估",
          content: "总部给予相应配套的选址方案<br>确保合作者选择合适店址"
        },
        {
          url: require("../assets/join/image/签约.jpg"),
          title: "加盟签约",
          content: "签订特许合同，授予特许营业证书<br>授权牌照"
        },
        {
          url: require("../assets/join/image/培训.jpg"),
          title: "人员培训",
          content: "人员全程培训，协助门店装修<br>设备采购"
        },
        {
          url: require("../assets/join/image/新店开业.jpg"),
          title: "开业筹备",
          content: "制定开业计划，全程指导开业工作<br>饼确保物料筹备发送"
        }
      ],
      analysis_table_options: [
        {
          1: "投资分析",
          2: "档口快捷店",
          3: "堂食快捷店",
          4: "备注"
        },
        {
          1: "投资费用",
          2: "30,000元",
          3: "330,000元",
          4: "品牌使用费3年"
        },
        {
          1: "保证金",
          2: "5,000元",
          3: "5,000元",
          4: "无违规时可返还"
        },
        {
          1: "装修",
          2: "7,000元",
          3: "12,000元",
          4: "按照300元/平米计算"
        },
        {
          1: "品牌管理费/年",
          2: "5,000元",
          3: "5,000元",
          4: "提供品牌营销相关支持"
        },
        {
          1: "设备",
          2: "30,000元",
          3: "40,000元",
          4: "包含店招灯箱座椅监控等费用"
        },
        {
          1: "供应链采购",
          2: "2,000元",
          3: "3,000元",
          4: "开业所需的产品料包和馅料费用"
        },
        {
          1: "合计",
          2: "79,000元/天",
          3: "95,000元/天",
          4: "不包含房租、转让、员工工资等"
        }
      ],
      profit_table_options: [
        {
          1: "利润分析",
          2: "档口快捷店",
          3: "堂食快捷店"
        },
        {
          1: "日均营业额",
          2: "2,000元/天",
          3: "3,000元/天"
        },
        {
          1: "月销售毛利润",
          2: "28,800元",
          3: "43,200元"
        },
        {
          1: "租金成本",
          2: "5,000元",
          3: "7,000元"
        },
        {
          1: "人工成本",
          2: "6,000元",
          3: "9,000元"
        },
        {
          1: "制作费用",
          2: "3,700元",
          3: "4,300元"
        },
        {
          1: "其他费用",
          2: "3,000元",
          3: "3,500元"
        },
        {
          1: "月费用合计",
          2: "17,700元",
          3: "23,800元"
        },
        {
          1: "月利润",
          2: "11,100元",
          3: "19,400元"
        },
        {
          1: "年利润",
          2: "133,200元",
          3: "23,2800元"
        }
      ],
      about_us_banner_image: require("../assets/join/image/banner.jpg"),
      join_advantage_image: require("../assets/join/image/加盟标题.jpg"),
      join_introduction_image: require("../assets/join/image/组20.jpg"),
      join_condition_image: require("../assets/join/image/加盟条件.jpg"),
      investment_condition_image: require("../assets/join/image/组22.jpg"),
      join_process_image: require("../assets/join/image/加盟政策.jpg"),
      join_process01_image: require("../assets/join/image/组24.jpg"),
      join_process02_image: require("../assets/join/image/组25.jpg"),
      join_process03_image: require("../assets/join/image/组26.jpg"),
      join_process04_image: require("../assets/join/image/组27.jpg"),
      income_investment_image: require("../assets/join/image/投资收益.jpg")
    };
  },
  created() {
    // 根据包子的数量处理数组
    let baozi_length = this.baozi.length;
    this.baozi_indicator_count =
      Math.ceil(baozi_length / 8) > 1 ? Math.ceil(baozi_length / 8) : 1;
    for (let i = 0; i < this.baozi_indicator_count; i++) {
      this.baozi_display_array.push(this.baozi.slice(0, 8));
      for (let j = 0; j < 8; j++) {
        this.baozi.shift();
      }
    }
    this.baozi_display_array_to_show = this.baozi_display_array[0];

    // 根据其他的数量处理数组
    let other_length = this.other.length;
    this.other_indicator_count =
      Math.ceil(other_length / 8) > 1 ? Math.ceil(other_length / 8) : 1;
    for (let i = 0; i < this.other_indicator_count; i++) {
      this.other_display_array.push(this.other.slice(0, 8));
      for (let j = 0; j < 8; j++) {
        this.other.shift();
      }
    }
    this.other_display_array_to_show = this.other_display_array[0];
    window.addEventListener("scroll", this.scroll_listener, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll_listener, true);
  },
  mounted() {
    this.initScroll();
  },
  methods: {
    initScroll() {
      document.documentElement.scrollTop = 0;
    },
    // 滚动事件检测
    scroll_listener() {
      let scrolled_distance = document.documentElement.scrollTop;
      if (scrolled_distance >= 40) {
        this.show = false;
        // eslint-disable-next-line no-console
        // console.log(scrolled_distance);
      } else {
        this.show = true;
        this.sub_show = true;
      }
      if (scrolled_distance >= 440) {
        this.sub_show = false;
        this.sub_title_show = true;
      } else {
        this.sub_show = true;
        this.sub_title_show = false;
      }
    },
    to_sec(selector) {
      let anchor = this.$el.querySelector(`${selector}`);

      // eslint-disable-next-line no-console
      console.log(anchor);
      // 获取该元素的距顶部的距离
      let total =
        selector == "b"
          ? document.body.scrollHeight - 100
          : anchor.offsetTop - 100;

      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      // 获取当前滚动条与窗体顶部的距离
      let distance =
        document.documentElement.scrollTop || document.body.scrollTop;
      // total = selector == "b" ? document.body.scrollHeight : distance;
      let step = total / 50;
      function smoothDown() {
        if (distance < total) {
          distance += step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothDown, 1);
        } else {
          window.clearInterval(timeout);
          // 限制滚动停止时的距离
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
      let timeout = window.setInterval(smoothDown, 100);
    },
    // 轮播图切换时旁边的detail切换
    carousalchange(current_index) {
      this.recommend_show.title = this.recommend[current_index].title;
      this.recommend_show.content = this.recommend[current_index].content;
      this.recommend_show.price = this.recommend[current_index].price;
      // eslint-disable-next-line no-console
      console.log(current_index);
    },
    // 控制包子显示
    baozi_indicator_click(index) {
      this.baozi_display_array_to_show = this.baozi_display_array[index - 1];
      for (let i = 0; i < this.baozi_indicator_count; i++) {
        if (i != index - 1) {
          this.$refs.baozi_indicator_circle_item[i].style.background =
            "transparent";
        } else {
          this.$refs.baozi_indicator_circle_item[i].style.background =
            "#231815";
        }
      }
    },
    // 控制其他显示
    other_indicator_click(index) {
      this.other_display_array_to_show = this.other_display_array[index - 1];
      for (let i = 0; i < this.other_indicator_count; i++) {
        if (i != index - 1) {
          this.$refs.other_indicator_circle_item[i].style.background =
            "transparent";
        } else {
          this.$refs.other_indicator_circle_item[i].style.background =
            "#231815";
        }
      }
    },
    // 轮播图左移
    translateleft() {
      let temp_obj = this.carousal.pop();
      this.carousal.unshift(temp_obj);
    },
    // 轮播图右移
    translateright() {
      let temp_obj = this.carousal.shift();
      this.carousal.push(temp_obj);
    },
    // 包子show 其他hidden
    baozi_display() {
      this.baozi_show = true;
      this.other_show = false;
    },
    // 包子show 其他hidden
    other_display() {
      this.baozi_show = false;
      this.other_show = true;
    }
  }
};
</script>

<style lang="less" scoped>
.about_us {
  .sub_nav {
    width: 100%;
    height: fit-content;

    .img {
      position: relative;
      background: greenyellow;
      width: 100%;
      height: 300px;

      .front_title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: front_title 2s;
        cursor: default;

        @keyframes front_title {
          from {
            opacity: 0;
            transform: translate(-50%, 50%);
          }
        }

        p {
          color: #ffffff;
          margin: 0;
          text-align: center;

          &:first-child {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 23px;
          }
          &:last-child {
            font-size: 16px;
            font-weight: 400;
          }
        }
      }
    }

    .sub_title {
      background: #f5f5f5;
      padding: 10px 0;

      div {
        margin: auto;
        display: flex;
        // max-width: 1200px;
        width: fit-content;

        span {
          position: relative;
          box-sizing: border-box;
          display: block;
          width: 130px;
          height: 38px;
          line-height: 38px;
          margin-right: 67px;
          text-align: center;
          z-index: 0;
          cursor: pointer;
          transition: all 0.3s;

          &:last-child {
            margin-right: 0;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 38px;
            opacity: 0;
            background: hsl(#e53832, 100%, 100%);
            transform: scaleX(0);
            z-index: -1;
            transition: all 0.3s;
          }

          &:hover {
            background: transparent;
            color: #ffffff;

            &::before {
              opacity: 1;
              transform: scaleX(1);
            }
          }
        }
      }
    }
    .sub_title_show {
      position: fixed;
      width: 100%;
      top: 0;
      background: #f5f5f5;
      padding: 10px 0;
      z-index: 1000;
      box-shadow: 0 2px 10px 2px hsl(#222222, 100%, 100%);
      transition: all 1s;

      &.ceiling_transition-enter,
      &.ceiling_transition-leave-to {
        transform: translate(0, -100%);
        transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
      }

      div {
        margin: auto;
        display: flex;
        max-width: 1200px;
        width: fit-content;

        span {
          position: relative;
          box-sizing: border-box;
          display: block;
          width: 130px;
          height: 38px;
          line-height: 38px;
          margin-right: 67px;
          text-align: center;
          z-index: 0;
          cursor: pointer;
          transition: all 0.3s;

          &:last-child {
            margin-right: 0;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 38px;
            opacity: 0;
            background: hsl(#e53832, 100%, 100%);
            transform: scaleX(0);
            z-index: -1;
            transition: all 0.3s;
          }

          &:hover {
            background: transparent;
            color: #ffffff;

            &::before {
              opacity: 1;
              transform: scaleX(1);
            }
          }
        }
      }
    }
  }

  .join_advantage {
    width: 1200px;
    // height: 251px;
    margin: 0 auto;
    margin-top: 64px;

    .image {
      width: 100%;
      height: 251px;
      background: red;
    }

    .join_introduction {
      margin-top: 33px;
      display: flex;
      .join_introduction_image {
        width: 594px;
        height: 359px;
        background: green;
      }
      .join_introduction_content {
        width: 606px;
        height: 359px;
        box-sizing: border-box;
        padding: 53px 12px 0 67px;

        p {
          margin: 0;
          &:first-child {
            font-size: 26px;
            font-weight: 500;
          }
          &:nth-child(2) {
            font-size: 16px;
            font-weight: 400;
            margin-top: 22px;
          }
          &:nth-child(3) {
            font-size: 26px;
            font-weight: 500;
            margin-top: 59px;
          }
          &:last-child {
            font-size: 16px;
            font-weight: 400;
            margin-top: 22px;
          }
        }
      }
    }
    .advantage_detail {
      display: flex;
      flex-wrap: wrap;
      margin-top: 31px;
      .advantage_detail_item {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 285px;
        height: 178px;
        // padding: 35px 56px 0 44px;
        margin-right: 20px;
        border: 1px solid #eeeeee;
        background: #ffffff;

        &:nth-child(4n) {
          margin-right: 0;
        }

        &:nth-child(n + 5) {
          margin-top: 27px;
        }

        .title {
          width: 134px;
          height: 43px;
          line-height: 43px;
          text-align: center;
          background: #db392b;
          color: #ffffff;
        }
        .content {
          margin: 0;
          line-height: 28px;
          font-size: 16px;
          font-weight: 400;
          text-align: center;
          margin-top: 21px;
        }
      }
    }
  }

  .join_condition {
    width: 1200px;
    margin: 0 auto;
    margin-top: 64px;

    .image {
      width: 100%;
      height: 251px;
      background: red;
    }

    .join_introduction {
      margin-top: 33px;
      display: flex;
      .join_introduction_image {
        width: 594px;
        height: 359px;
        background: green;
      }
      .join_introduction_content {
        width: 606px;
        height: 359px;
        box-sizing: border-box;
        padding: 53px 12px 0 0px;

        p {
          margin: 0;
          &:first-child {
            font-size: 26px;
            font-weight: 500;
          }
          &:nth-child(2) {
            font-size: 16px;
            font-weight: 400;
            margin-top: 22px;
            line-height: 28px;
          }
        }

        .tips {
          margin-top: 45px;
          span {
            display: inline-block;
            box-sizing: border-box;
            margin-right: 15px;
            width: 112px;
            height: 32px;
            line-height: 32px;
            border: 1px solid #acabab;
            color: #acabab;
            text-align: center;
          }
        }
      }
    }

    .store {
      display: flex;
      width: fit-content;
      margin: 0 auto;
      margin-top: 34px;
      .store_stall {
        width: 604px;
        height: 525px;
        box-sizing: border-box;
        padding: 40px 45px 0 45px;
        background: #db392b;
        margin-right: 1px;

        p {
          margin: 0;
          font-size: 26px;
          font-weight: 500;
          color: #ffffff;
          margin-bottom: 21px;
          text-align: center;
        }

        .store_stall_item {
          display: flex;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          width: 100%;

          &:nth-child(n + 2) {
            height: 48px;
            line-height: 48px;
          }

          .store_stall_item_image {
            width: 16px;
            height: 16px;
            margin-right: 18px;

            .img {
              width: 19px;
              height: 19px;
              vertical-align: middle;
            }
          }

          span {
            display: block;
            box-sizing: border-box;
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;

            &:nth-last-child(2) {
              width: 64px;
            }

            &:last-child {
              margin-left: 68px;
            }
          }
        }
      }

      .store_dining {
        width: 596px;
        height: 525px;
        background: #f1f1f1;
        box-sizing: border-box;
        padding: 40px 45px 0 45px;
        margin-right: 1px;

        p {
          margin: 0;
          font-size: 26px;
          font-weight: 500;
          color: #4c4948;
          margin-bottom: 21px;
          text-align: center;
        }

        .store_dining_item {
          display: flex;
          border-bottom: 1px solid rgba(91, 91, 91, 1);
          width: 100%;

          .store_dining_item_image {
            width: 16px;
            height: 16px;
            margin-right: 18px;

            .img {
              width: 19px;
              height: 19px;
              vertical-align: middle;
            }
          }

          &:nth-child(n + 2) {
            height: 48px;
            line-height: 48px;
          }

          span {
            display: block;
            box-sizing: border-box;
            color: #4c4948;
            font-size: 16px;
            font-weight: 400;

            &:nth-last-child(2) {
              width: 64px;
            }

            &:last-child {
              margin-left: 68px;
            }
          }
        }
      }
    }
  }

  .join_process {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 65px;

    .image {
      width: 100%;
      height: 251px;
      background: red;
    }

    .process_image {
      max-width: 1200px;
      height: 190px;
      display: flex;
      margin-top: 30px;

      .process_image_item {
        position: relative;
        width: 287px;
        height: 190px;
        background: #f1f1f1;
        margin-right: 18px;

        &:nth-child(4) {
          margin-right: 0;
        }

        img {
          background: #000;
          width: 100%;
          height: 190px;
        }

        span {
          display: block;
          box-sizing: border-box;
          position: absolute;
          //   padding: 13px 70px 0 69px;
          text-align: center;
          width: 217px;
          height: 42px;
          line-height: 42px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          font-weight: 400;
          background: #ffffff;
        }
      }
    }

    .process_content {
      display: flex;
      flex-wrap: wrap;
      margin-top: 40px;

      .process_content_item {
        position: relative;
        box-sizing: border-box;
        padding: 29px 0 0 0;
        width: 400px;

        &:nth-child(3) {
          &::after {
            width: 0;
            height: 0;
          }
        }

        &:nth-child(n + 4) {
          &::before {
            width: 0;
            height: 0;
          }
        }

        &:nth-child(6) {
          &::after {
            width: 0;
            height: 0;
          }
        }

        &::before {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translate(-50%);
          background: rgba(172, 172, 172, 0.5);
          height: 2px;
          width: 389px;
        }

        &::after {
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(0, -50%);
          background: rgba(172, 172, 172, 0.5);
          width: 2px;
          height: 210px;
        }

        .icon {
          margin: 0 auto;
          width: fit-content;
          height: fit-content;
          img {
            width: 100%;
            height: 100%;
          }
        }

        p {
          text-align: center;
          margin: 0;

          &:nth-last-child(2) {
            margin-top: 5px;
          }

          &:last-child {
            margin-top: 22px;
            margin-bottom: 40px;
          }
        }
      }
    }
  }

  .income_investment {
    width: 1200px;
    margin: 0 auto;
    margin-top: 65px;
    padding: 0 0 65px 0;
    .image {
      width: 100%;
      height: 251px;
      background: #f1f1f1;
    }
    .investment_analysis {
      p {
        position: relative;
        margin: 0;
        margin-top: 38px;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 14px;

        &::after {
          content: "";
          position: absolute;
          bottom: -14px;
          left: 50%;
          transform: translate(-50%);
          width: 71px;
          height: 3px;
          background: rgba(219, 57, 43, 1);
        }
      }
      .table {
        margin-top: 32px;

        .line01 {
          display: flex;
          flex-direction: row;
          margin-bottom: 5px;

          .line01_item {
            text-align: center;
            width: 196px;
            height: 60px;
            line-height: 56px;
            font-size: 18px;
            font-weight: 400;
            margin-right: 2px;
            color: #231815;
            background-color: #f1f1f1;

            &:first-child {
              width: 331px;
              margin-right: 6px;
              font-weight: bold;
            }

            &:nth-child(2) {
              width: 196px;
              margin-right: 4px;
            }

            &:nth-child(3) {
              width: 196px;
              margin-right: 4px;
            }

            &:nth-child(4) {
              width: 462px;
              margin-right: 4px;
            }

            &:last-child {
              margin-right: 0;
            }
          }

          &:first-child {
            .line01_item {
              background: #dbdbdb;
              color: #231815;
              font-weight: bold;
            }
          }

          &:last-child {
            .line01_item {
              background: #db392b;
              color: #ffffff;

              &:nth-last-child(n + 2) {
                font-weight: bold;
              }

              &:last-child {
                font-weight: 400;
              }
            }
          }
        }
      }
    }

    .investment_profit {
      margin: 0;
      margin-top: 47px;
      p {
        position: relative;
        margin: 0;
        margin-top: 38px;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 14px;

        &::after {
          content: "";
          position: absolute;
          bottom: -14px;
          left: 50%;
          transform: translate(-50%);
          width: 71px;
          height: 3px;
          background: rgba(219, 57, 43, 1);
        }
      }

      .table {
        margin-top: 33px;

        .line01 {
          display: flex;
          flex-direction: row;
          margin-bottom: 2px;

          &:nth-child(-n + 3) {
            .line01_item {
              background: #dbdbdb;
              font-weight: bold;
              color: #231815;
            }
          }

          &:nth-child(n + 4) {
            .line01_item {
              background: #f1f1f1;
              color: #231815;

              &:first-child {
                font-weight: bold;
              }

              &:nth-child(n + 2) {
                font-weight: 500;
              }
            }
          }

          &:nth-child(n + 9) {
            .line01_item {
              background: #db392b;
              color: #ffffff;
              font-weight: bold;
            }
          }

          .line01_item {
            text-align: center;
            width: 418px;
            height: 60px;
            line-height: 56px;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #dbdbdb;

            &:last-child {
              margin-right: 0;
            }
          }

          .special_item {
            text-align: center;
            width: 418px;
            height: 60px;
            line-height: 16px;
            padding-top: 18px;
            box-sizing: border-box;
            font-size: 18px;
            margin-right: 2px;
            color: #525252;
            font-weight: bold;
            background-color: #dbdbdb;

            span {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
